<template>
    <div>
        <headerView class="box"></headerView>
        <div class="get_code">
            <p>
                我们将以短信或电话的形式，把验证码发送
                至+<span>{{number}}</span>，请留意手机短信，或
                接听0755/0766/025/010等开头的电话。
            </p>
            <van-password-input :value="value" :mask="false" :focused="showKeyboard" @focus="showKeyboard = true"
                class="input" :gutter="6" />

            <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" :disabled="!newSendState"/>
            <span class="time" v-if="newSendState">从新发送：
                <van-count-down :time="time" format="ss 秒" @finish="newSendState = false" />
            </span>
            <span class="newSend" v-else @click="getCaptcha">从新发送</span>
            <van-button round id="btn" :disabled="checkedState" @click="goLogin">登录</van-button>
        </div>
    </div>
</template>

<script>
import { Notify } from "vant";
import { SendVerificationCode } from "../../https/loginApi";
import headerView from "../../components/headerView.vue";
export default {
    components: { headerView },
    data() {
        return {
            value: '',
            showKeyboard: true,
            // time: 50,
            checkedState: false,
            number: "",
            time: 51000,
            newSendState: true
        }
    },
    created() {
        this.number = this.$store.state.login.phoneNum
        // this.getCaptcha()  // 发送验证码的请求
    },
    methods: {
        goLogin() {
            if (this.value.length == 6) {
                this.$router.push('/homeshops') // 登录首页
                return
            }
            Notify({ type: 'danger', message: '请输入完整的短信验证码' });

        },
        getCaptcha() {
            this.newSendState = true
            // 发送短信验证码
            SendVerificationCode(this.number)
                .then((res) => {
                    console.log('登陆成功：', res)
                })
                .catch((err) => {
                    console.log(err)
                })
        }
    }
}
</script>

<style scoped>
.box {
    background-color: #f8fafc;
    color: #000;
}

.get_code {
    width: 80%;
    margin: 0 auto;
    font-size: 16px;
}

.get_code p {
    margin-bottom: 40px;
}

/* 验证码输入框 */
.van-password-input {
    margin: 0;
}

.van-password-input__security li {
    background-color: #f2f2f2;
    height: 90%;
}

.time {
    display: flex;
    font-size: 14px;
    color: #929395;
}

.van-count-down {
    color: #ff6e53;
}

.newSend {
    color: #ff6e53;
    font-size: 15px;
}

/* 登录按钮 */
#btn {
    margin-top: 50px;
    width: 100%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 18px;
}
</style>